<template>
	<view class="container pageColor">
		<tn-nav-bar fixed customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
			</view>
			<view slot="default">
				<text style="text-align: center;font-size: 32rpx;color: #000;font-weight: 500;">新增票据</text>
			</view>
		</tn-nav-bar>
		<!-- <image src="https://jcsb2024.obs.cn-north-4.myhuaweicloud.com/xcxtb/bgimage.png" class="pageCover" mode=""> -->
		</image>
		<view class="pageContent" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view class="tn-padding-sm tn-margin-sm " style="border: 1px solid #e3e3e3;border-radius: 10px;">
				<tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition" disabled
					:labelWidth="labelWidth" :labelAlign="labelAlign">
					<tn-form-item label="票据号:" prop="pjh" leftIcon="coupon" :labelPosition="labelPosition"
						:labelAlign="labelAlign">
						<tn-input v-model="model.pjh" type="text" placeholder="请输入票据号" :border="border"></tn-input>
					</tn-form-item>
					<tn-form-item label="平台:" prop="pt" leftIcon="world" :labelPosition="labelPosition"
						:labelAlign="labelAlign">
						<tn-input v-model="model.pt" type="select" placeholder="请输入平台:" :border="border"
							@click="showPt = true"></tn-input>
					</tn-form-item>
					<tn-form-item label="金额:" prop="je" leftIcon="money" :labelPosition="labelPosition"
						:labelAlign="labelAlign">
						<tn-input v-model="model.je" type="text" placeholder="请输入金额" :border="border"></tn-input>
					</tn-form-item>
					<tn-form-item label="到期日:" prop="dqr" leftIcon="calendar" :labelPosition="labelPosition"
						:labelAlign="labelAlign">
						<tn-input v-model="model.dqr" type="select" placeholder="请输入到期日" :border="border"
							@click="showDqr = true"></tn-input>
					</tn-form-item>
					<!-- <tn-form-item label="剩余天数:" prop="syts" leftIcon="calendar" :labelPosition="labelPosition"
						:labelAlign="labelAlign">
						<tn-input v-model="model.syts" disabled type="number" placeholder="请输入剩余天数"
							:border="border"></tn-input>
					</tn-form-item> -->
					<tn-form-item label="开立方:" prop="klf" leftIcon="my-reduce" :labelPosition="labelPosition"
						:labelAlign="labelAlign">
						<tn-input v-model="model.klf" type="text" placeholder="请输入开立方" :border="border"></tn-input>
					</tn-form-item>
				</tn-form>
			</view>
			<view class="tn-padding-sm tn-margin-sm tn-text-center">
				<tn-button fontBold blockRepeatClick='true' plain width="100%" backgroundColor="#35b2ff"
					@click="submitForm" fontColor="#080808">提交信息</tn-button>
			</view>
		</view>
		<!-- 选择日期 -->
		<tn-picker mode="time" v-model="showDqr" :params="params" @confirm="confirmDqr"></tn-picker>
		<!-- 选择平台 -->
		<tn-select v-model="showPt" mode="single" :list="ptList" @confirm="confirmPt"></tn-select>
	</view>
</template>
<script>
	const db = uniCloud.database();
	const dbCollectionName = 'pjxx';
	var app = getApp().globalData.config;
	export default {
		components: {

		},
		data() {
			return {
				// 显示日期控件
				showDqr: false,
				showPt: false,
				// 只显示年月日
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				ptList: [
					{
						label: '商票',
						value: '商票'
					},
					{
						label: '联易融',
						value: '联易融'
					},
					{
						label: '航信',
						value: '航信'
					},
					{
						label: '桐信',
						value: '桐信'
					},
					{
						label: '能信',
						value: '能信'
					},
					{
						label: '云信',
						value: '云信'
					},
					{
						label: '快信',
						value: '快信'
					},
					{
						label: '讯易链',
						value: '讯易链'
					},
				],
				modelId: null,
				model: {
					pjh: null,
					je: null,
					pt: '',
					dqr: '',
					syts: null,
					klf: null,
				},
				labelWidth: 180,
				labelPosition: 'left',
				labelAlign: 'right',
				userInfo: null,
				isalpha: true,
			}
		},
		watch: {
			'vuex_user': {
				handler(value) {
					// 如果sectionList发生改变，重新初始化选项列表信息

				},
				deep: true,
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 80) {
				this.isalpha = false
			} else {
				this.isalpha = true
			}
		},
		onLoad(options) {
			this.openid = options.openid
			this.model.pjh = this.tool.dateFormat("YYYYmmddHHMMSS", new Date()) + '' + new Date().getMilliseconds()
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			submitForm() {
				if (!this.model.pjh) {
					this.tool.toastTip('请输入票据号')
					return
				}
				if (!this.model.pt) {
					this.tool.toastTip('请输入平台')
					return
				}
				if (!this.model.je) {
					this.tool.toastTip('请输入金额')
					return
				}
				if (!this.model.dqr) {
					this.tool.toastTip('请输入到期日')
					return
				}
				if (!this.model.syts) {
					this.tool.toastTip('请输入剩余天数')
					return
				}
				if (!this.model.klf) {
					this.tool.toastTip('请输入开立方')
					return
				}
				this.model.openid = this.openid
				db.collection(dbCollectionName).add(this.model).then((res) => {
					this.tool.toastTip('新增成功')
					this.model = {
						pjh: null,
						je: null,
						pt: '',
						dqr: '',
						syts: null,
						klf: null,
					}
				}).catch((err) => {
					this.tool.toastTip('失败成功')
				})
			},
			/**
			 * 确认到期日
			 */
			confirmDqr(e) {
				console.log(e);
				this.model.dqr = e.year + '/' + e.month + '/' + e.day
				this.model.syts = this.handlerSyts(this.model.dqr) + ''
			},
			/**
			 * 计算天数
			 * @param {Object} rq
			 */
			handlerSyts(rq) {
				let targetDate = new Date(rq)
				// 计算距离目标日期的天数
				const now = new Date();
				// 将时间部分重置为午夜，避免时区问题
				const nowMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
				const targetMidnight = new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate());
				// 计算时间差（毫秒）
				const diff = targetMidnight - nowMidnight;
				// 转换为天
				let syts = Math.ceil(diff / (1000 * 60 * 60 * 24));
				return syts
			},

			/**
			 * 确认到期日
			 */
			confirmPt(e) {
				this.model.pt = e[0].value
			},

		}
	}
</script>
<style lang="less" scoped>
	.container {
		width: 100%;
		font-family: PingFang SC, PingFang SC;

		.pageContent {
			padding: 0 26rpx 30rpx 26rpx;

		}
	}
</style>